<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Canvas</title>
<style>
    *{margin:0;padding:0;box-sizing:border-box;}
    body{background:#000;}
    #canvas{display: block;position:absolute;top:50%;left:50%;margin-left:-320px;margin-top:-112px;background:#fff;}
</style>
</head>
<body>
    <canvas id="canvas"></canvas>
</body>
<script>
    const canvas = document.getElementById("canvas"),ctx = canvas.getContext("2d"),w = 641,h = 224;
    canvas.width = w;
    canvas.style.width = w+"px";
    canvas.height = h;
    canvas.style.height = h+"px";

    
    var G = {
        // 静态资源
        res : [],
        // stat 
        stat : 0, // 游戏状态 
        
        config : {
            
        },
        start(){
            var it = this;
            it.stat = 1;
            it.loadJS({src:"lib.js"});
            it.loadJS({src:"player.js"});
            it.loadJS({src:"render.js"});
            it.loadJS({src:"event.js"});
            it.loadJS({src:"logic.js"});
            it.loadJS({src:"timer.js"});
            it.loadJS({src:"imgs.config.js",complete:function(){
                it.loadImgs(it.imgs,"images/",
                    function(){
                        // 图片加载完成  开始游戏
                        Timer.showFps();  // 获取fps
                        Render.addEvent(Render.drawFps);  // 条添加Render默认的fps展示方式
                        Event.addEventListener();
                        Timer.run(function(){
                            Logic.run();
                            Render.draw();
                        })
                        
                    },
                    function(i){
                        
                    },function(i){
                    
                    }
                )
            }});
            
        },
        /*
        *  加载js文件，放到head里面
        *  i  = { src :src ,complete : complete ,faild : faild}
        *
        */
        loadJS(i){
            var it = this , js = document.createElement("script");
            js.src = i.src;
            document.getElementsByTagName("head")[0].appendChild(js)
            if(typeof i.complete ==  "function") js.onload = i.complete
            if(typeof i.faild ==  "function")    js.onerror = i.faild
            
        },
        
        loadImgs(list,folder,callbackCompelete,callbackSuccessOne,callbackFaildOne){
            var an = list.length,n=0;
            var loadOne = (i)=>{
                var img = new Image();
                img.src = folder+i.src;
                img.stat=  0;
                img.onload = function(){
                    n++;
                    i.stat = 1;
                    i.el = img;
                    G.res[i.name] = i;
                    callbackSuccessOne(i)
                    
                    if(n == an) callbackCompelete();
                }
                img.onerror = function(){
                    n++;
                    i.stat = -1;
                    callbackSuccessOne(i);
                    if(n == an) callbackCompelete();
                }
            }
            for(var  x in list){
                loadOne(list[x]);
            }
        }

        
    }

    G.start();
   
    
</script>
</html>